<%@page import="model.bean.ListCalendar"%>
<%@page import="model.bean.Calendar"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>AdminLTE | Data Tables</title>
<meta
	content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
	name='viewport'>
	<%@ include file="jsheader.jsp" %>
</head>
<body class="skin-blue">
	<%
		ArrayList<ListCalendar> listCalendar = (ArrayList<ListCalendar>) request
				.getAttribute("listCalendar");
	%>
	<%
		ArrayList<Calendar> listCalendarStatus = (ArrayList<Calendar>) request
				.getAttribute("listCalendarStatus");
	%>
	<!-- header logo: style can be found in header.less -->
	<%@ include file="header.jsp"%>

	<div class="wrapper row-offcanvas row-offcanvas-left">
		<!-- Left side column. contains the logo and sidebar -->
		<%@ include file="menu.jsp"%>

		<!-- Right side column. Contains the navbar and content of the page -->
		<aside class="right-side"> <!-- Content Header (Page header) -->
		<section class="content-header">
		<h1>
			Data Tables <small>advanced tables</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i> Trang chủ</a></li>
			<li class="active">Lịch công tác</li>
		</ol>
		</section> <!-- Main content --> <section class="content">
		<div class="row">
		<section class="col-lg-3 connectedSortable ui-sortable">
			<div class="box box-success" style="height: 500px">
				<div class="box-header">
					<i class="fa fa-comments-o"></i>
					<h3 class="box-title">Sự kiện chính</h3>
					<div class="box-tools pull-right" data-toggle="tooltip"
						title="Status">
						<div class="btn-group" data-toggle="btn-toggle">
							<button type="button" class="btn btn-default btn-sm active">
								<i class="fa fa-square text-green"></i>
							</button>
							<button type="button" class="btn btn-default btn-sm">
								<i class="fa fa-square text-red"></i>
							</button>
						</div>
					</div>
				</div>
				<div class="box-body chat" id="chat-box">
				<% 
					if (listCalendarStatus != null) { 
					  for (Calendar c : listCalendarStatus ) {
				%>
					
					<div class="item">
						<img src="img/avatar2.png" alt="user image" class="online" />
						<p class="message">
							<a href="#" class="name"> <small
								class="text-muted pull-right"><i class="fa fa-clock-o"></i>
									<%=c.getStarttime() %></small><%=c.getTitle() %>
							</a> <%=c.getContent() %>
						</p>
					</div>
					<!-- /.item -->
					  <% } %>
					<% } %>
				</div>
				</div>
			</section>
			
			<div class="col-sm-9">
				<div class="box">
					<div class="box-header">
						<h3 class="box-title">Lịch công tác</h3>
					</div>
					<!-- /.box-header -->
					<div class="box-body table-responsive">
						<table class="table table-bordered table-striped">
							<tr>
								<th class="col-xs-1">Thứ</th>
								<th class="col-xs-6">Sáng</th>
								<th class="col-xs-6">Chiều</th>
							</tr>
							<%
								if (listCalendar != null)
									for (ListCalendar l : listCalendar) {
							%>
							<tr>
								<td><%=l.getDate()%></td>
								<td>
									<table>

										<%
											for (Calendar c : l.getCalendarArr()) {
										%>
										<%
											if (Integer.parseInt(c.getStarttime().substring(0, 2)) <= 12) {
										%>
										<tr>
											<td><%=c.getTitle()%></td>
										</tr>
										<%
											}
										%>
										<%
											}
										%>
									</table>
								</td>
								<td>
									<table>
										<%
											for (Calendar c : l.getCalendarArr()) {
										%>
										<%
											if (Integer.parseInt(c.getStarttime().substring(0, 2)) > 12) {
										%>
										<tr>
											<td><%=c.getTitle()%></td>
										</tr>
										<%
											}
										%>
										<%
											}
										%>
									</table>
								</td>
							</tr>
							<%
								}
							%>
						</table>
					</div>
					<!-- /.box-body -->
				</div>
				<!-- /.box -->
			</div>

		</div>

		</section><!-- /.content --> </aside>
		<!-- /.right-side -->
	</div>
	<!-- ./wrapper -->
	<%@ include file="footer.jsp" %>
</body>
</html>
